@function to_rem($px) {
    $rem: $px/50px;
    @return #{$rem}rem;
}
@function toRem($px) {
    $rem: $px/50;
    @return #{$rem}rem;
}
.clearfix:after {content:"\200B"; display:block; height:0; clear:both; }
.clearfix { *zoom:1; }
$width750: to_rem(750px);
.app-index {
    padding-bottom:to_rem(140px);
    background:#f1f1f1;
    width: $width750;
    overflow-x: hidden;
}
.header {
    width:to_rem(750px);
    height:to_rem(140px);
    background-image: url(images/bk_new.png#data);
    background-size: 100% 100%;
    padding-top: to_rem(12px);
    // box-shadow: 0 to_rem(4px) to_rem(4px) #f1f1f1;
    position: fixed;
    z-index: 100;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
    .lin1 {
        width: 100%;
        $height56:to_rem(56px);
        $height28:to_rem(28px);
        height: $height56;
        // font-size: 0;
        li {
            float: left;
        }
        a {
            display: block;
        }
        .ask,.find {
            width:to_rem(104px);
            height:$height56;
        }
        .interest {
            width: to_rem(542px);
            height: $height56;
            display: inline-block;
            border-radius: $height28;
            background-color: #ececec;
            text-align: center;
            a {
                display: inline-block;
                font-size: to_rem(28px);
                font-family: PingFangSC-Regular;
                color: #444;
                line-height: 100%;
                margin: 0 auto;
            }
            span {
                display: block;
                float: left;
                line-height: $height56;
            }
            i:first-child {
                display: block;
                float: left;
                width: $height28;
                height: $height28;
                background-image: url(images/location.png#data);
                background-size: 100% 100%;
                margin-top: to_rem(14px);
                margin-right: to_rem(12px);
            }
            i:last-child {
                display: block;
                float: left;
                width: to_rem(17px);
                height: to_rem(10px);
                background-image: url(images/arrow_down.png#data);
                background-size: 100% 100%;
                margin-top: to_rem(23px);
                margin-left: to_rem(12px);
            }
        }
        .ask_icon {
            margin: 0 auto;
            width:to_rem(40px);
            height:to_rem(39px);
            background-image: url(images/ask.png#data);
            background-size: 100% 100%;
            margin-top: to_rem(8.5px);
        }
        .find_icon {
            margin: 0 auto;
            width: to_rem(40px);
            height:to_rem(40px);
            background-image: url(images/head_find.png#data);
            background-size: 100% 100%;
            margin-top: to_rem(8px);
            
        }
    }
    .lin2 {
        width: 100%;
        $height72: to_rem(72px);
        height: $height72;
        li {
            display: block;
            float: left;
            width: to_rem(125px);
            height: $height72;
            text-align: center;
            a {
                display: inline-block;
                box-sizing: border-box;
                line-height: $height72;
                font-size: to_rem(28px);
                color: #444;
                font-family:PingFangSC-Regular;
            }
            .selected {
                color: #ff6600;
                border-bottom: to_rem(4px) solid #ff6600;
            }
        }


    }
}
.banner {
    width: to_rem(750px);
    height: to_rem(440px);
    overflow: hidden;
    margin-top: to_rem(40px);
    z-index: -1;
    li {
        display: block;
        width: to_rem(750px);
        height: to_rem(440px);
        a {
            display: block;
            width: 100%;
            height: 100%; 
            img {
                width: 100%;
                height: 100%;
                z-index: -1;
            }
        }
    }
}
.nav {
    width: to_rem(750px);
    height: to_rem(152px);
    background-color: #fff;
    li {
        display: block;
        width: to_rem(150px);
        height: to_rem(152px);
        float: left;
        a {
            display: block;
            width: 100%;
            height: 100%;
            text-align: center;
            padding-top: to_rem(20px);
            img {
                width: to_rem(76px);
                height: to_rem(76px);
            }
            span {
                display: block;
                margin-top: to_rem(8px);
                font-size: to_rem(24px);
            }
        }
    }
}
.advert {
    width: $width750;
    height: to_rem(136px);
    margin-top: to_rem(16px);
    padding: to_rem(32px) to_rem(28px);

    font-family:PingFangSC-Regular;
    color:#444444;
    overflow: hidden;
    .gglogo {
        width: to_rem(86px);
        height: to_rem(72px);
        float: left;
        background-image: url(images/gg_03.png);
        background-size: 100% 100%;
    }
    ul {
        float: left;
        li {
            height: to_rem(36px);
            line-height: to_rem(36px);
            font-size: 0;
            .port {
                display: block;
                width: to_rem(36px);
                height: to_rem(36px);
                float: left;
                position: relative;
                i {
                    position: absolute;
                    display: block;
                    left: 0;
                    right: 0;
                    margin: auto;
                    top: 50%;
                    width: to_rem(4px);
                    height: to_rem(4px);
                    background-color: #ccc;
                    margin-top: to_rem(-2px);        
                }
            }
            a {
                display: inline-block;
                font-size:to_rem(26px);
            }
            span {
                color: #ccc;
            }
        }
    }
}
.timelimit {
    width: $width750;
    height: to_rem(554px);
    margin-top: to_rem(16px);
    .timeheader {
        width: $width750;
        height: to_rem(104px);
        text-align: center;
        padding-top: to_rem(28px);
        font-family:FZLTZHK--GBK1-0;
        .limit_title {
            width: $width750;
            // font-size:to_rem(34px);
            color:#444444;
            font-weight: bold;
            line-height: to_rem(39px);
            font-size: 0;
            span {
                display: inline-block;
                margin-right: to_rem(4px);
                font-size:to_rem(34px);
            }
            .xs {
                margin-right: to_rem(8px);
            }
            .t {
                display: inline-block;
                background:#ff782d;
                border-radius: to_rem(2px);
                color: #fff;
                line-height: to_rem(34px);
                padding: 0 to_rem(4px);
            }
            .bd {
                color: #ff782d;
            }
        }
        .limit_introduce {
            color: #444;
            height: to_rem(14px);
            line-height: to_rem(14px);
            margin-top: to_rem(8px);
            font-size: to_rem(12px);
        } 
    }
    .commodity_list {
        width: 1000px;
        height: to_rem(450px);
        overflow: hidden;
        .commodity_box {
            width: to_rem(260px);
            height: to_rem(450px);
            text-align: center;
            float: left;
            margin-right: to_rem(16px);
            &:last-of-type {
                margin-right: 0;
            } 
            img {
                width: to_rem(260px);
                height: to_rem(260px);
            }
            .sp_title {
                font-family:PingFangSC-Regular;
                font-size:to_rem(26px);
                color:#5f6166;
                width: to_rem(260px);
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                margin-top: to_rem(16px);
                line-height: to_rem(37px);
            }
            .price {
                .fh,.price_now {
                    color: #ff782d;
                }
                .fh {
                    font-size: to_rem(22px);
                }
                .price_now {
                    font-size: to_rem(30px);
                }
                .price_before {
                    font-size: to_rem(24px);
                    color: #bbb;
                    text-decoration: line-through;
                }
            }
            a {
                display: inline-block;
                width: to_rem(208px);
                height: to_rem(48px);
                line-height: to_rem(48px);
                background-color: #ff782d;
                font-size: to_rem(24px);
                color: #fff;
                border-radius: to_rem(24px);
                margin-top: to_rem(19px);
            }
        }
    }
}
.supercost {
    width: 100%;
    height: to_rem(834px);
    margin-top: to_rem(16px);
    .sh_header {
        width: 100%;
        height: to_rem(100px);
        background-image: url(images/head.png);
        background-size: 100% 100%;
    }
    .sh_body {
        width: to_rem(718px);
        height: to_rem(718px);
        margin: 0 auto;
        font-size: 0;
        a {
            display: block;
            width: to_rem(359px);
            height: to_rem(359px);
            float: left;
            img {
                width: to_rem(359px);
                height: to_rem(359px);
            }
        }
    }
}
.advert_bigger {
    width: 100%;
    height: to_rem(181px);
    margin-top: to_rem(16px);
    img {
        width: 100%;
        height: 100%;
    }
}
.everyday {
    width: 100%;
    height: to_rem(532px);
     margin-top: to_rem(16px);
     .ed_header {
         width: 100%;
         height: to_rem(100px);
     }
     .ed_body {
         width: 100%;
         height: to_rem(431px);
         border-top: 1px solid #f1f1f1;
         .img_bg {
             width: to_rem(308px);
             height: to_rem(431px);
             float: left;
             border-right: 1px solid #f1f1f1;
             img {
                 width: to_rem(308px);
                 height: to_rem(431px);
             }
         }
         .img_sl {
             width: to_rem(441px);
             height: to_rem(215px);
             float: left;
             img {
                 width: to_rem(441px);
                 height: to_rem(215px);
             }
         }
         .no3 {
             border-top: 1px solid #f1f1f1;
         }
     }
}
.ztselected {
    width: 100%;
    height: to_rem(639px);
    margin-top: to_rem(16px);
    .zt_header {
        width: 100%;
        height: to_rem(100px);
        img {
            width: to_rem(750px);
            height: to_rem(100px);
        }
    }
    .jx_body {
        height: to_rem(519px);
        width: to_rem(557px);
        margin: 0 auto;
        overflow-y: hidden;
        .jx_body_con {
            height: to_rem(519px);
            width: to_rem(1703px);
            margin: 0 auto;
        }
        .jx_box {
            height: to_rem(519px);
            width: to_rem(557px);
            float: left;
            margin-left: to_rem(16px);
            &:first-of-type {
                margin-left: 0;
            }
            .box-header {
                text-align: center;
                img {
                    width: to_rem(557px);
                    height: to_rem(278px);
                }
            }
            .box-list {
                width: 100%;
                background-color: #f7f7f7;
                li {
                    display: block;
                    float: left;
                    width: to_rem(185px);
                    height: to_rem(241px);
                    text-align: center;
                    p {
                        width: to_rem(185px);
                        overflow: hidden;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                        font-family:PingFangSC-Regular;
                        color: #444;
                        font-size: to_rem(24px);
                    }
                }
            }
        }
    }
}
// 推荐商品
.recommend {
    width: 100%;
    margin-top: to_rem(16px);
    .tj_header {
        width: 100%;
        height: to_rem(100px);
    }
    .tj_body {
        width: 100%;
        background-color: #fff;
        li {
            width: to_rem(374px);
            height: to_rem(374px);
            display: block;
            float: left;
            list-style: none;
            text-align: center;
            img {
                width: to_rem(240px);
                height: to_ren(240px);
            }
            .price {
                .fh,.price_now {
                    color: #ff782d;
                }
                .fh {
                    font-size: to_rem(22px);
                }
                .price_now {
                    font-size: to_rem(30px);
                }
                .price_before {
                    font-size: to_rem(24px);
                    color: #bbb;
                    text-decoration: line-through;
                }
            }
        }
        .clear {
            clear: both;
        }
    }
}
